
	


//轮播图1
 class Pagination{
		constructor(oLis){
			this.index=0;
			this.oLis=oLis;
			this.oSpan=oSpan;
			// 获取所有数据信息
			this.arr=[];
			this.eventBind();
		}
		
		//获取数据
		getData(){
			let that=this;
			let xhr=new XMLHttpRequest();
			xhr.open("GET","js/product.json",true);
			xhr.send();
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4&&xhr.status==200){
					that.load(xhr.responseText);
				}
			}
		}
		
		load(resText){
			this.arr=JSON.parse(resText);
			//必须获取数据之后在进行操作
			console.log(this.arr);
			this.setContentLi();
		}
		
		设置li
		setContentLi(){
			//i控制的是数据元素的下标
			//j控制的是li的下标
			for(let i=this.index*3,j=0;i<this.index+3;i++,j++){
				this.oLis[j].firstElementChild.src=this.arr[i].img;
				// this.oLis[j].lastElementChild.innerHTML=this.arr[i].info;
			}
		}
		
		setSpan(){
			for(let i=0;i<this.oSpan.length;i++){
				if(i==this.index*3/this.oLis.length){
					this.oSpan[i].style.backgroundColor="papayawhip";
				}else{
					this.oSpan[i].style.backgroundColor="white";
				}
			}
		}
		
		btnSpan(){
			let that=this;
			for(let i=0;i<oSpan.length;i++){
				oSpan[i].onclick=function(){
					that.index=i;
					that.setContentLi();
					that.setSpan();
				}
			}
		}
		
		next(){
			let oNext=document.querySelector(".gallary-next");
			let that=this;
			oNext.onclick=function(){
				that.index++;
				if(that.index==that.arr.length/that.oLis.length){
					that.index=0;
				}
				that.setContentLi();
				that.setSpan();
			}
		}
		
		previous(){
			let oPrev=document.querySelector(".gallary-prev");
			let that=this;
			oPrev.onclick=function(){
				that.index--;
				if(that.index==-1){
					that.index=that.arr.length/that.oLis.length-1;
				}
				that.setContentLi();
				that.setSpan();
			}
		}
		
		eventBind(){
			this.getData();
			this.next();
			this.previous();
			this.btnSpan();
		}
		
	}
	
	let oLis=document.querySelectorAll("li");
	let oSpan=document.querySelectorAll("span");
	let p=new Pagination(oLis);
	
	